<div class="wrapper">
  <table mat-table [dataSource]="users" class="mat-elevation-z8">
    <ng-container matColumnDef="Name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>
    <ng-container matColumnDef="Email">
      <th mat-header-cell *matHeaderCellDef>Email</th>
      <td mat-cell *matCellDef="let element">{{ element.email }}</td>
    </ng-container>
    <ng-container matColumnDef="Role">
      <th mat-header-cell *matHeaderCellDef>Role</th>
      <td mat-cell *matCellDef="let element">
        <mat-select (selectionChange)="onSelectRole(element)" [(value)]="element.role" placeholder="Update user's role">
          <mat-option value="user"> user </mat-option>
          <mat-option value="manager"> manager </mat-option>
        </mat-select>
      </td>
    </ng-container>
    <ng-container matColumnDef="State">
      <th mat-header-cell *matHeaderCellDef>State</th>
      <td mat-cell *matCellDef="let element">
        <mat-select (selectionChange)="onSelectState(element)" [(value)]="element.state" placeholder="Update user's state">
          <mat-option value="activated"> activated </mat-option>
          <mat-option value="deactivated"> deactivated </mat-option>
        </mat-select>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>
